<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 库存列表</title>
    <link rel="shortcut icon" href="../../content/static/img/favicon.ico">
    <link href="../../content/css/common_modal.css" rel="stylesheet">
    <link href="../../content/static/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="../../content/static/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../../content/static/css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="../../content/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../../content/js/lib/vue/select2.min.css" rel="stylesheet">
    <link href="../../content/static/css/style.min.css?v=4.0.0" rel="stylesheet">
    <link href="../../content/js/lib/calendar/calendar.css" rel="stylesheet">
    <link href="../../content/js/lib/calendar/scrollbar.css" rel="stylesheet">
    <link href="../../content/js/lib/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
    <link href="../../content/js/lib/ztree/css/metroStyle/metroStyle.css" rel="stylesheet">
    <style>
        .fa-female:before {
            color: #fb7cd5;
        }
        .fa-location-arrow:before {
            color: rebeccapurple;
        }
        .fa-mobile-phone:before, .fa-mobile:before{
            color: black;
        }
        .fa-map-marker:before {
            color: #1ab394;
        }
        table-th{
            font-size: 12px;
            font-family: tahoma, "Microsoft YaHei", "Hiragino Sans GB", Arial, sans-serif;
            line-height: 1.42857143;
            color: #333;
            background-color: #f5f5f5;
        }
        table tr{ height:40px;}
        #productTree {
            width: 320px;
            max-height: 376px;
            min-height: 32px;
            overflow-y: auto;
            padding: 10px 10px 0;
        }
</style>
</head>

<body class="content-container">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <ol class="breadcrumb">
                            <li>
                                <a>库存管理</a>
                            </li>
                            <li>
                                <a>库存列表</a>
                            </li>
                        </ol>
                    </div>
                    <div class="ibox-content">
                        <div class="col-sm-12" style="background-color: #f5f5f5;padding: 12px 12px 10px">
                            <div class="input-group">
                                <div style="float: left;padding: 0px 10px;">
                                    <input id="costTimeStart" name="costTimeStart" placeholder="开始周期" v-model="PayTimeStart"
                                        type="text" class="fill-item timeChoose w-120" readonly="readonly" style="float: left">
                                    <span class="fill-desc" style="float: left">到</span>
                                    <input id="costTimeEnd" name="costTimeEnd" v-model="PayTimeEnd" type="text" class="fill-item timeChoose w-120"
                                        placeholder="结束周期" readonly="readonly">
                                </div>
                                <div style="float: left;padding: 0px 10px 0px 0px;">
                                    <select id="warehouse" class="col-sm-4">
                                        <option value='' disabled selected style='display:none;'>选择仓库</option>
                                        <option v-for="item in warehouseList" v-bind:value="item.Value" v-bind:selected="$index===0"
                                            v-text="item.Text"></option>
                                    </select>
                                </div>
                                <!-- 使用下方下拉框要引用chosen.jquery.js和chosen.css 初始化 $("#abc").chosen(".chosen-select")-->
                                <!-- <select data-placeholder="选择省份..." class="chosen-select" style="width:350px;" tabindex="2" id="abc">
                                        <option value="">请选择省份</option>
                                        <option value="110000" hassubinfo="true">北京</option>
                                        <option value="120000" hassubinfo="true">天津</option>
                                        <option value="130000" hassubinfo="true">河北省</option>
                                        <option value="140000" hassubinfo="true">山西省</option>
                                        <option value="150000" hassubinfo="true">内蒙古自治区</option>
                                        <option value="210000" hassubinfo="true">辽宁省</option>
                                        <option value="220000" hassubinfo="true">吉林省</option>
                                        <option value="230000" hassubinfo="true">黑龙江省</option>
                                        <option value="310000" hassubinfo="true">上海</option>
                                    </select> -->
                                <div style="float: left;padding: 0px 10px 0px 0px;width: 200px;">
                                    <input type="text" placeholder="搜索编号、名称、电话" class="fill-item col-sm-4">
                                </div>
                                <div style="float: left;padding: 0px 10px 0px 0px;width: 250px;">
                                    <span class="treeBtn project">选择产品类型</span>
                                </div>
                                <a class="revision-btn">搜索</a>
                            </div>
                            <div>
                                <div style="float: left;padding: 0px 10px 0px 0px;width: 250px;">
                                    <div class="checkbox i-checks">
                                        <label style="padding-left: 10px;"><input type="checkbox" value=""> <i></i> 过滤零库存</label>
                                        <label style="padding-left: 10px;"><input type="checkbox" value=""> <i></i> 显示停用商品</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12" style="padding: 12px 0px 12px 0px;">
                            <div class="alert alert-info">
                                <span>总条数：<span>12 条</span></span>&nbsp;&nbsp;<span>总金额：<span>280,000</span></span>
                            </div>
                        </div>
                        <table class="table table-hover">
                            <thead style="background: #f5f5f5;">
                                <tr>
                                    <th>#序号</th>
                                    <th>商品编号</th>
                                    <th>商品名称</th>
                                    <th>规格</th>
                                    <th>属性</th>
                                    <th>单位</th>
                                    <th>
                                        <div class="tooltip-demo">期初库存量
                                            <label class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom"
                                                title="" data-original-title="期初库存量为使用本软件前的库存数量"></label>
                                        </div>
                                    </th>
                                    <th>库存数量</th>
                                    <th>出库量</th>
                                    <th>入库量</th>
                                    <th>
                                        <div class="tooltip-demo">成本价
                                            <label class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom"
                                                title="" data-original-title="成本价是根据商品进货加权平均计算而来（如果有期初库存，也会影响到成本价计算）"></label>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="tooltip-demo">库存总额
                                            <label class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom"
                                                title="" data-original-title="库存总额 = 成本价 × 库存数量"></label>
                                        </div>
                                    </th>
                                    <th>零售价</th>
                                    <th>
                                        <div class="tooltip-demo">零售价总额
                                            <label class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom"
                                                title="" data-original-title="零售价总额 = 零售价 × 库存数量"></label>
                                        </div>
                                    </th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>SP20181120000</td>
                                    <td>后视镜</td>
                                    <td>2x2</td>
                                    <td class="text-navy">型号：GTX，颜色:银白色，品牌:aodi</td>
                                    <td>件</td>
                                    <td>0</td>
                                    <td>20</td>
                                    <td>6</td>
                                    <td>0</td>
                                    <td class="amount">120.00</td>
                                    <td class="amount">2400.00</td>
                                    <td class="amount">280.00</td>
                                    <td class="amount">2080.00</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="detailShow(1)">库存流水</a>
                                        <a href="javascript:;" v-on:click="detailShow(2)">库存分布</a>
                                        <a href="javascript:;" v-on:click="detailShow(3)">成本明细</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>SP20181120001</td>
                                    <td>后视镜</td>
                                    <td>2x2</td>
                                    <td class="text-navy">型号：GTX，颜色:银白色，品牌:aodi</td>
                                    <td>件</td>
                                    <td>0</td>
                                    <td>20</td>
                                    <td>6</td>
                                    <td>0</td>
                                    <td class="amount">120.00</td>
                                    <td class="amount">2400.00</td>
                                    <td class="amount">280.00</td>
                                    <td class="amount">2080.00</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="detailShow(123)">库存流水</a>
                                        <a href="javascript:;" v-on:click="detailShow(123)">库存分布</a>
                                        <a href="javascript:;" v-on:click="detailShow(123)">成本明细</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>SP20181120002</td>
                                    <td>后视镜</td>
                                    <td>2x2</td>
                                    <td class="text-navy">型号：GTX，颜色:银白色，品牌:aodi</td>
                                    <td>件</td>
                                    <td>0</td>
                                    <td>20</td>
                                    <td>6</td>
                                    <td>0</td>
                                    <td class="amount">120.00</td>
                                    <td class="amount">2400.00</td>
                                    <td class="amount">280.00</td>
                                    <td class="amount">2080.00</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="detailShow(123)">库存流水</a>
                                        <a href="javascript:;" v-on:click="detailShow(123)">库存分布</a>
                                        <a href="javascript:;" v-on:click="detailShow(123)">成本明细</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>SP20181120003</td>
                                    <td>后视镜</td>
                                    <td>2x2</td>
                                    <td class="text-navy">型号：GTX，颜色:银白色，品牌:aodi</td>
                                    <td>件</td>
                                    <td>0</td>
                                    <td>20</td>
                                    <td>6</td>
                                    <td>0</td>
                                    <td class="amount">120.00</td>
                                    <td class="amount">2400.00</td>
                                    <td class="amount">280.00</td>
                                    <td class="amount">2080.00</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="detailShow(123)">库存流水</a>
                                        <a href="javascript:;" v-on:click="detailShow(123)">库存分布</a>
                                        <a href="javascript:;" v-on:click="detailShow(123)">成本明细</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td>SP20181120004</td>
                                    <td>后视镜</td>
                                    <td>2x2</td>
                                    <td class="text-navy">型号：GTX，颜色:银白色，品牌:aodi</td>
                                    <td>件</td>
                                    <td>0</td>
                                    <td>20</td>
                                    <td>6</td>
                                    <td>0</td>
                                    <td class="amount">120.00</td>
                                    <td class="amount">2400.00</td>
                                    <td class="amount">280.00</td>
                                    <td class="amount">2080.00</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="detailShow(123)">库存流水</a>
                                        <a href="javascript:;" v-on:click="detailShow(123)">库存分布</a>
                                        <a href="javascript:;" v-on:click="detailShow(123)">成本明细</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>6</td>
                                    <td>SP20181120005</td>
                                    <td>中控台</td>
                                    <td>20x80</td>
                                    <td class="text-navy">型号：GTX，颜色:银白色，品牌:aodi</td>
                                    <td>件</td>
                                    <td>0</td>
                                    <td>20</td>
                                    <td>6</td>
                                    <td>0</td>
                                    <td class="amount">120.00</td>
                                    <td class="amount">2400.00</td>
                                    <td class="amount">280.00</td>
                                    <td class="amount">2080.00</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="detailShow(123)">库存流水</a>
                                        <a href="javascript:;" v-on:click="detailShow(123)">库存分布</a>
                                        <a href="javascript:;" v-on:click="detailShow(123)">成本明细</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>7</td>
                                    <td>SP20181120006</td>
                                    <td>火花塞</td>
                                    <td>2x6x8</td>
                                    <td class="text-navy">型号：GTX-S，颜色:黑白色，品牌:aodi</td>
                                    <td>个</td>
                                    <td>0</td>
                                    <td>20</td>
                                    <td>6</td>
                                    <td>0</td>
                                    <td class="amount">120.00</td>
                                    <td class="amount">2400.00</td>
                                    <td class="amount">280.00</td>
                                    <td class="amount">2080.00</td>
                                    <td>
                                        <a href="javascript:;" v-on:click="detailShow(123)">库存流水</a>
                                        <a href="javascript:;" v-on:click="detailShow(123)">库存分布</a>
                                        <a href="javascript:;" v-on:click="detailShow(123)">成本明细</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div style="display: none;" v-show="pageInit">
                <modal v-bind:show.sync="detailModal.show" v-bind:style="detailModal .style" v-bind:add-class="detailModal.addClass">
                    <h4 slot="header"><span v-text="modelTitle"></span></h4>
                    <div slot="body" class="clearfix">
                        <form class="form-horizontal m-t" novalidate="novalidate">
                            <div v-if=modelFlag!=2>
                                <img class="proPhotoDetails" style="height: 80px;width: 80px;margin-bottom: 30px;float: left;" src="../../content/static/img/no_pic.png">
                                <div style="height: 110px;">
                                    <div style="padding: 24px 24px 24px 90px;">
                                        <div class="title-tips" style="font-size: 15px;color: black;padding-bottom: 5px">商品名称 后视镜/银白色/SP20181217000</div>
                                        <div class="title-tips" style="padding-bottom: 2px;">时间周期 全部</div>
                                        <div class="title-tips">仓库 A仓</div>
                                    </div>
                                </div>
                            </div>
                            <table class="table table-hover table-bordered" v-if=modelFlag==2>
                                <thead>
                                    <tr>
                                        <th>#序号</th>
                                        <th>仓库</th>
                                        <th>库存数量</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>合肥汽贸</td>
                                        <td>20</td>
                                    </tr>
                                    <tr>
                                        <td>1</td>
                                        <td>B库存</td>
                                        <td>120</td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="search-list" style="text-align:right" v-show=modelFlag==3>
                                <input id="costTimeStart_detail" name="costTimeStart_detail" v-model="PayTimeStart_detail"
                                    type="text" class="fill-item timeChoose w-120" readonly="readonly">
                                <span class="fill-desc">到</span>
                                <input id="costTimeEnd_detail" name="costTimeEnd_detail" v-model="PayTimeEnd_detail"
                                    type="text" class="fill-item timeChoose w-120" readonly="readonly">
                                <button type="button" class="btn btn-sm btn-primary"> 搜索</button>
                            </div>
                            <table class="table table-hover table-bordered" v-if=modelFlag==3 style="margin-top: 20px">
                                <thead>
                                    <tr>
                                        <th rowspan="2" colspan="1">序号</th>
                                        <th rowspan="2" colspan="1">业务类型</th>
                                        <th rowspan="2" colspan="1">业务单号</th>
                                        <th rowspan="2" colspan="1">业务日期</th>
                                        <th colspan="3">入库</th>
                                        <th colspan="3">出库</th>
                                        <th colspan="3">结余</th>
                                    </tr>
                                    <tr>
                                        <th>数量</th>
                                        <th>成本价</th>
                                        <th>成本额</th>
                                        <th>数量</th>
                                        <th>成本价</th>
                                        <th>成本额</th>
                                        <th>数量</th>
                                        <th>成本价</th>
                                        <th>成本额</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>进货</td>
                                        <td>JHD20181120000</td>
                                        <td>2018-11-20 19:22:22</td>
                                        <td class="text-navy">300</td>
                                        <td class="text-danger">150</td>
                                        <td class="text-danger">45000</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td class="text-danger">300</td>
                                        <td class="text-danger">45000</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>进货退货(关联单据)</td>
                                        <td>JHD20181120000</td>
                                        <td>2018-11-20 22:22:22</td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td class="text-navy">30</td>
                                        <td class="text-danger">150</td>
                                        <td class="text-danger">4500</td>
                                        <td class="text-navy">150</td>
                                        <td class="text-danger">150</td>
                                        <td class="text-danger">22500</td>
                                    </tr>
                                </tbody>
                            </table>
                            <div class="search-list" style="text-align:right;padding: 10px 10px 10px;" v-if=modelFlag==1>
                                <div class="input-group">
                                    <div style="float: left;padding: 0px 10px 0px 0px;width: 200px;">
                                        <input type="text" placeholder="请输入订单号" class="fill-item col-sm-4">
                                    </div>
                                    <a class="revision-btn" href="javascript:;">搜索</a>
                                    <a class="revision-btn-default" href="javascript:;" style="margin-left: 25px;">导出</a>
                                </div>
                            </div>
                            <div class="alert alert-info" v-if=modelFlag==1 style="padding: 10px 2px 6px 10px;margin-top: 10px">
                                <span>当前库存：<span>显示查询列表选择的仓库</span></span><br>
                                <span>计算规则：<span>当前库存量=期初库存+入库量-出库量</span></span><br>
                                <span>当前库存量：<span class="text-danger" style="font-size: 25px">1 </span> 期初库存： <span
                                        style="font-size: 25px">0</span>
                                    入库量：<span class="text-navy" style="font-size: 25px">4</span> 出库量： <span class="text-danger"
                                        style="font-size: 25px">3</span></span>
                            </div>
                            <table class="table table-hover table-bordered" v-if=modelFlag==1 style="margin-top: 20px">
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>业务日期</th>
                                        <th>仓库</th>
                                        <th>关联业务</th>
                                        <th>关联业务单号</th>
                                        <th>往来单位名称</th>
                                        <th>出库量(单位:桶)</th>
                                        <th>入库量(单位:桶)</th>
                                        <th>期初库存(单位:桶)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>2018-11-20 19:22:22</td>
                                        <td>A仓库</td>
                                        <td>进货</td>
                                        <td>JHD20181120000</td>
                                        <td>文具店</td>
                                        <td class="text-danger">0</td>
                                        <td class="text-navy">4</td>
                                        <td>0</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>2018-11-22 09:22:22</td>
                                        <td>A仓库</td>
                                        <td>销售</td>
                                        <td>XSD201811200610</td>
                                        <td>锤子科技</td>
                                        <td class="text-danger">3</td>
                                        <td class="text-navy">0</td>
                                        <td>0</td>
                                    </tr>
                                </tbody>
                            </table>
                        </form>
                    </div>
                </modal>
            </div>
            <div class="treeWrap projectTreeWrap none" style="width:320px;">
                <div>
                    <input type="text" class="fill-item" v-model="treeModel.searchText" style="display:inline;width:140px;" />
                    <a class="revision-btn" style="cursor:pointer;margin-top: -3px;min-width: 56px;" v-on:click="treeModel.search">搜索</a>
                    <a class="revision-btn" style="cursor:pointer;margin-top: -3px;min-width: 56px;" v-show="treeModel.searchResultMax>0"
                        v-on:click="treeModel.searchNext">下一个</a>
                </div>
                <ul id="productTree" class="ztree" style="margin-left: -12px;"></ul>
                <div class="btn-wrap">
                    <a href="javascript:;" class="revision-btn-default width56">取消</a>
                    <a href="javascript:;" class="revision-btn width56">确定</a>
                </div>
            </div>
        </div>
    </div>
    <script src="../../content/js/lib/vue/vue.min.js"></script>
    <script src="../../content/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="../../content/static/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="../../content/static/js/plugins/iCheck/icheck.min.js"></script>
    <script src="../../content/static/js/plugins/chosen/chosen.jquery.js"></script>
    <script src="../../content/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../../content/static/js/content.min.js?v=1.0.0"></script>
    <script src="../../content/js/lib/calendar/calendar.js"></script>
    <script src="../../content/js/lib/calendar/scrollbar.js"></script>
    <script src="../../content/js/lib/vue/vue-modal.js"></script>
    <script src="../../content/js/lib/vue/vue-pagination.js"></script>
    <script src="../../content/js/common.js"></script>
    <script src="../../content/js/lib/vue/select2.js"></script>
    <script src="../../content/js/lib/ztree/js/jquery.ztree.all.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".i-checks").iCheck({
                checkboxClass: "icheckbox_square-green",
                radioClass: "iradio_square-green",
            });
            //时间验证
            var calObj = new $.Calendar({
                //time: true,
                skin: 'white'
            });
            var calObj_detail = new $.Calendar({
                //time: true,
                skin: 'white'
            });
            $('#costTimeStart').focus(function () {
                var $this = $(this),
                    val = $this.val(),
                    endTime = $('#costTimeEnd').val();
                calObj.pick({
                    elem: this,
                    endDate: endTime
                });
            });
            $('#costTimeEnd').focus(function () {
                var $this = $(this),
                    val = $this.val(),
                    startTime = $('#costTimeStart').val();
                calObj.pick({
                    elem: this,
                    startDate: startTime
                });
            });
            $('#costTimeStart_detail').focus(function () {
                var $this = $(this),
                    val = $this.val(),
                    endTime = $('#costTimeEnd_detail').val();
                calObj_detail.pick({
                    elem: this,
                    endDate: endTime
                });
            });
            $('#costTimeEnd_detail').focus(function () {
                var $this = $(this),
                    val = $this.val(),
                    startTime = $('#costTimeStart_detail').val();
                calObj_detail.pick({
                    elem: this,
                    startDate: startTime
                });
            });
            $('.treeBtn').click(function () {
                if ($(this).hasClass('project')) {
                    $treeWrap = $('.projectTreeWrap');
                }
                var $this = $(this),
                    pos = $this.offset();
                if ($treeWrap.hasClass('none')) {
                    $treeWrap.css({
                        left: pos.left,
                        top: pos.top + $this.height()
                    }).removeClass('none');
                } else {
                    $treeWrap.addClass('none');
                }
            });
            $('.treeWrap .btn-wrap a').click(function (e) {
                var targetClass = e.target.className;
                if (targetClass.indexOf('btn-success') > -1) {
                    vm.projectId.paramId = vm.projectId.checkedId;
                    if (vm.projectId.paramId === '') {
                        $('.treeBtn.project').html('未选择').addClass('no-project');
                    } else {
                        $('.treeBtn.project').html('已选择').removeClass('no-project');
                    }
                }
                $('.treeWrap').addClass('none');
            });
        });
        $("#warehouse").select2({
            width: "220px"
        });
        $("#warehouse_detail").select2({
            width: "220px"
        });
        var vmData = {
            detailModal: {
                show: false,
                style: {
                    width: '980px',
                    height: "auto"
                },
                addClass: 'scroll-modal',
                func: {
                    type: Function
                },
                close: function () {
                    vm.detailModal.show = false;
                }
            },
            modelTitle: "",
            warehouseList: [{
                    "Text": "北京",
                    "Value": "553",
                },
                {
                    "Text": "上海",
                    "Value": "360",
                }, {
                    "Text": "大西洋大西洋大西洋大西洋大西洋大西洋大西洋",
                    "Value": "365",
                },
                {
                    "Text": "广州",
                    "Value": "4105",
                }, {
                    "Text": "北冰洋",
                    "Value": "510",
                },
                {
                    "Text": "深圳",
                    "Value": "3219",
                },
                {
                    "Text": "天津",
                    "Value": "99402",
                },
                {
                    "Text": "合肥",
                    "Value": "519",
                },
                {
                    "Text": "苏州",
                    "Value": "518",
                },
                {
                    "Text": "南京",
                    "Value": "517",
                },
                {
                    "Text": "无锡",
                    "Value": "525",
                },
                {
                    "Text": "大东北",
                    "Value": "528",
                },
                {
                    "Text": "大西北",
                    "Value": "533",
                },
                {
                    "Text": "非洲",
                    "Value": "538",
                },
                {
                    "Text": "欧洲",
                    "Value": "537",
                },
                {
                    "Text": "南美洲",
                    "Value": "536",
                }
            ],
            modelFlag: 0,
            treeProject: '',
            treeIds: {
                checkedId: '',
                paramId: ''
            },
            treeModel: {
                searchText: '',
                searchResultMax: 0,
                search: function () {
                    count = 0;
                    treeObj = [];
                    var lastName = vm.treeModel.searchText;
                    treeObj = $.fn.zTree.getZTreeObj("productTree");
                    treeObj.cancelSelectedNode();
                    //通过名称模糊搜索，也可通过Id查找
                    nodes = treeObj.getNodesByParamFuzzy("text", lastName, null);
                    treeObj.selectNode(nodes[0]);
                    vm.treeModel.searchResultMax = nodes.length - 1;
                },
                searchNext: function searchNext() {
                    count++;
                    treeObj.selectNode(nodes[count]);
                    if (count == nodes.length - 1) {
                        count = -1;
                    }
                }
            },
        };
        vmData = $.extend(vmData, baseData);
        var vmMothod = {
            init: function () {},
            setCheckId: function (checkNodes, type) {

                var treeNode = [];
                checkNodes = checkNodes || [];
                var len = checkNodes.length,
                    arr = [];
                while (len) {
                    var treeChildNode = {
                        Id: "",
                        ChildIds: []
                    };
                    var item = checkNodes[len - 1],
                        status = item.getCheckStatus();
                    if (status.checked) {
                        arr.push(item.id);
                        treeChildNode.Id = item.id;
                        if (item.ChildNodes != undefined) {
                            for (var i = 0; i < item.ChildNodes.length; i++) {
                                if (item.ChildNodes[i].getCheckStatus().checked == true)
                                    treeChildNode.ChildIds.push(item.ChildNodes[i].id);
                            }
                        }
                    }
                    treeNode.push(treeChildNode);
                    len--;
                }
                vm.treeProject = JSON.stringify(treeNode);
                vm[type].checkedId = arr.join(',');
            },
            detailShow: function (obj) {
                if (obj == 2)
                    vm.modelTitle = "库存分布";
                else if (obj == 3) vm.modelTitle = "成本明细";
                else vm.modelTitle = "库存流水";
                vm.modelFlag = obj;
                vm.detailModal.show = true;
            },
        };
        vmMothod = $.extend(vmMothod, baseCommonFunction);
        var vm = new Vue({
            el: '.content-container',
            data: vmData,
            methods: vmMothod
        });
        vm.loadTree(1, 2);
        vm.init();
    </script>
</body>

</html>